<template>
  <page-scroll :footer="false">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
        :title="title"
        :is_name="false"
        :is_back="true"
        :is_lang="false"
        :is_kf="false"
      ></gltitle>
    </template>
    <template #content>
      <div class="video-content" v-if="showCon">
      <videom3u8 :videoPic="videoPic" :playerOptions="playerOptions" />
      <div class="container">
        <div class="he db">
          <div class="flexs">
            {{ datas.name }}
          </div>
        </div>
        <div class="body">
          <div class="ld">
            <div class="left">
              <div class="l">{{ $t("page.doc117") }}：{{ datas.type }}</div>
              <div class="d">{{ $t("page.doc118") }}：{{ datas.director }}</div>
            </div>
            <!--  v-show="scoreShow" -->
            <div class="right">
              <div class="icon" @click="getLike">
                <img
                  v-if="score > 0"
                  src="../../assets/images/Group37.png"
                  alt=""
                />
                <img v-else src="../../assets/images/Group36.png" alt="" />
              </div>
            </div>
          </div>
          <div class="introduction">
            <div class="n">{{ $t("page1.doc43") }}：</div>
            <div class="p" v-html="datas.summary"></div>
          </div>
        </div>
        <div v-if="datalist.length != 0">
          <div class="title1 flex">
            <!-- <img src="../../assets/images/ico_tj.png" alt=""> -->
            {{ $t("page.doc120") }}
          </div>

          <div class="videoLists">
            <ul class="list">
              <li
                @click="checkLevel(item)"
                v-for="(item, k) in datalist"
                :key="k"
                :class="{ on: item.watch }"
              >
                <div class="pic" :data-text="item.hasWatch?$t('page.doc4'):$t('page4.doc6')">
                  <img v-lazy="item.coverUrl" alt="" />
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    </template>
  </page-scroll>
</template>
<script>

import videom3u8 from './videom3u8.vue';
export default {
  components:{
    videom3u8
  },
  data() {
    return {
      title: "",
      datas: [],
      id: this.$route.query.id,
      datalist: [],
      isPlay: true,
      isPlay2: true,
      videoPic: "",
      value: 0,
      score: 0,
      userInfoIevel: "", // 用户等级
      setIntTime: null, // 视频播放的定时器
      videoTime: 0, // 视频播放的时间
      scoreShow: false,
      videoAuto: false,
      levelData: [],
      playerOptions:{},
      showCon:false
    };
  },
  created() {
    this.videoTime = 0;
    this.scoreShow = false;
  },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  mounted() {
    this.getLevel()
    setTimeout(() => {
      // var video = this.$refs.myVideo;
      // document.addEventListener(
      //   "WeixinJSBridgeReady",
      //   () => {
      //     video.play();
      //   },
      //   false
      // );
      // this.$refs.myVideo.addEventListener("play", this.onVideo);
      // this.$refs.myVideo.addEventListener("pause", this.onPause);
      this.getinfo();
    }, 500);
  },
  beforeDestroy() {
    clearTimeout(this.setIntTime);
    this.setIntTime = null;
  },
  methods: {
    checkLevel(item) {
      console.log(item,456)
      this.showCon=false;
      this.id=item.movieId;
      this.getinfo();
      // if (this.userData.level > -1) {
      //   let levelInfo = {}
      //   for (let i = 0; i < this.levelData.length; i++) {
      //     if (this.levelData[i].level == this.userData.level) {
      //       levelInfo = this.levelData[i]
      //       break;
      //     }
      //   }
        //if (levelInfo.incomeDailyCount - levelInfo.incomeDailyUseCount > 0) {
          //this.path_url('/home/view?id=' + item.movieId, item.movieId)
        // } else {
        //   this.$toast(this.$t('new.doc51'))
        // }
      // } else {
      //   this.$toast(this.$t('new.doc50'))
      // }
    },
    getLevel() {
      this.$post(this.URL.wallet.level, {}).then((res) => {
        if (res.code == 0) {
          this.levelData = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    // 8秒钟后评分出现
    scoreAppear() {
      this.setIntTime = setInterval(() => {
        this.videoTime += 1;
        if (this.videoTime == 2) {
          this.scoreShow = true;
          clearTimeout(this.setIntTime);
        }
      }, 1000);
    },
    // 返回
    go_back() {
      this.$router.go(-1);
    },
    rateChange() {
      // 限制用户评定的星级，只允许评分3星以上，如果vip用户选择1-3星评分，应该提示给出提示：请评分3星以上
      if (this.value <= 3) {
        this.value = this.score;
        this.$toast(this.$t("page3.doc61"));
        return;
      }
      this.$post(this.URL.home.movie_like, {
        movieId: this.id,
        score: this.value,
        userLevel: this.$store.state.grade,
      }).then((res) => {
        if (res.code == 0) {
          this.score = this.value;
          this.$toast(res.message);
          // this.$toast(this.$t('page3.doc57'))
        } else {
          this.value = this.score;
          this.$toast(res.message);
          // this.$toast(this.$t('page3.doc58'))
        }
      });
    },
    onVideo() {
      this.isPlay = false;
      this.isPlay2 = false;

      this.scoreAppear();
      this.$refs.myVideo.play();
    },
    onPause() {
      this.isPlay = false;
      this.isPlay2 = true;
      this.$refs.myVideo.pause();
    },

    getinfo() {
      this.scoreShow = false;
      clearTimeout(this.setIntTime);
      this.setIntTime = null;
      this.videoTime = 0;

      this.$post(this.URL.home.movie_detail, {
        movieId: this.id,
      }).then((res) => {
        if (res.code == 0) {
          // if(res.data.summary && res.data.summary != 1){
          //   let strSummary1 = res.data.summary.slice(0,8)
          //   let strSummary2 = res.data.summary.slice(34)
          //   let strSummary = strSummary1 + 'width="100%"' +' '+ 'style="height: 6rem;"' +' '+ strSummary2
          //   res.data.summary = strSummary
          // }
            this.showCon=true;
          this.datas = res.data;
          this.score = res.data.score;
          this.value = this.score;
          // this.$refs.myVideo.src = res.data.url;
          this.videoPic = res.data.coverUrl;
          if (res.data.coverUrl == "") {
            this.videoPic = require("../../assets/images/none1.png");
          } else {
            this.videoPic = res.data.coverUrl;
          }
          this.playerOptions = {
            autoplay: false, // 如果true,浏览器准备好时开始回放。
            muted: false, // 默认情况下将会消除任何音频。
            loop: false, // 导致视频一结束就重新开始。
            preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
            language: 'en_US',
            aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
            width: '100%',
            sources: [
              {
                src: res.data.url
              }
            ],
            poster: "", // 封面地址
            notSupportedMessage: this.$t('new.doc52'), //允许覆盖Video.js无法播放媒体源时显示的默认信息。
            controlBar: {
              timeDivider: true,           // 当前时间和持续时间的分隔符
              durationDisplay: true,       // 显示持续时间
              remainingTimeDisplay: false, // 是否显示剩余时间功能
              fullscreenToggle: true
            }
          }
          this.getlist();
        } else {
          this.$toast(res.message);
        }
      });
      this.$post(this.URL.home.movie_watch, {
        movieId: this.id,
      }).then((res) => {
        if (res.code == 0) {
        } else {
          this.$toast(res.message);
        }
      });
    },
    // 用户信息
    getuser() {
      this.$post(this.URL.member.personal, {}).then((res) => {
        if (res.code == 0) {
          this.userInfo = res.data;
          if (res.data) {
            this.userInfoIevel = res.data.level;
          }
        } else {
        }
      });
    },

    getlist() {
      this.$post(this.URL.home.movie_list2, {
        movieId: this.id,
        random: 1,
        page: this.pageSize,
        pageSize: 9,
      }).then((res) => {
        if (res.code == 0) {
          this.datalist = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    getLike() {
      console.log(this.score)
      // if (this.score > 0) {
      //   this.$toast(this.$t("page4.doc27"));
      //   return;
      // }
      this.$post(this.URL.home.movie_score, {
        movieId: this.id,
        score: 5,
        userLevel: this.$store.state.grade,
      }).then((res) => {
        if (res.code == 0) {
          this.score++;
        } else {
          this.$toast(res.message);
        }
      });
    },

    path_url(url, id) {
      this.id = id;
      this.getinfo();
      // this.onVideo()
      this.isPlay = true;
      this.isPlay2 = true;
      this.$router.replace({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .db .van-rate__icon {
  font-size: 0.4rem;
}
/deep/ .content-container {
  padding-top: 0 !important;
}

.video {
  > img {
    width: 100%;
    height: 100%;
    z-index: 2;
    object-fit: cover;
  }
  video {
    width: 100%;
    background: #000;
  }
  .play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      height: 1rem;
    }
  }
}
.he {
  padding: 0.4rem 0rem;
  > .flexs {
    font-size: 0.36rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .str {
    .on {
      border-radius: 1.6rem;
      background: rgba(255, 255, 255, 0.2);
      height: 0.48rem;
      display: flex;
      align-items: center;
      padding: 0 0.28rem;
      color: #ffffff;
      font-size: 0.24rem;
      font-weight: 500;
    }
    .sun {
      margin: 0 0.2rem;
    }
  }
}
.body {
  .ld {
    font-size: 0.24rem;
    font-weight: 300;
    color: var(--COcolor1);
    margin-bottom: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      .l {
        margin-bottom: 0.14rem;
      }
    }
    .right {
      .icon {
        img {
          height: 0.91rem;
        }
      }
    }
  }
  .introduction {
    .n {
      font-size: 0.28rem;
      font-weight: 500;
      margin-bottom: 0.19rem;
    }
    .p {
      font-size: 0.24rem;
      font-weight: 300;
    }
  }
}

.title1 {
  font-size: 0.32rem;
  font-weight: 600;
  padding: 0.4rem 0 0.2rem 0;
  display: flex;
  align-items: center;
  img {
    margin-right: 0.12rem;
    height: 0.32rem;
  }
}

.pic{
  border: 0.02rem solid #d9b151;
  border-radius: 0.2rem;
  position: relative;
  &::after{
    content: attr(data-text);
    position: absolute;
    width: 0.8rem;
    top: 0;
    right: 0;
    background: var(--color-orange-77, #FFDF89);
    color: #000000;
    font-size: 0.18rem;
    text-align: center;
    border-radius: 0 0.2rem 0 0.12rem;
    font-weight: bold;
  }
}

</style>
